<template>
    <div>
      <div class="recommend-main" v-for="(item,index) in recommendList" :key="index">
        <div class="recommend-main-hotIcon">
          <img src="/static/img/hot.png" alt="">
          <p>热议中</p>
        </div>
        <p class="recommend-main-content">
          【{{item.title}}】
        </p>
        <p>—— {{item.group_name}}</p>
        <p class="discussBtn" ﻿@tap="discussionBtn(item.id,item.auth)">我要讨论</p>
      </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
    export default {
        name: "recommend",
      props:{
        recommendList:{
          type:Array
        }
      },
      methods:{
        discussionBtn(id,state){
          if(!this.isLogin){
            let that = this;
            ﻿uni.showModal({
              title: '亲，您尚未登录',
              content: '前去登录吧~',
              success (res) {
                if (res.confirm) {
                  ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
                }
              }
            });
          }else {
            if(state === 'yes'){
				uni.navigateTo({
					url: "/movie/postDetails?id="+id
				})
            }
            else {
              ﻿uni.showToast({
                title: "您暂未加入该群组！",
                icon: 'none',
                duration: 2000
              })
            }
          }
        }
      },
      computed: {
        ...mapState([
          'isLogin'
        ])
      },
    }
</script>

<style scoped>
.recommend-main{
  width: 100%;
  border: 1rpx solid #EF5A56;
  border-radius: 10rpx;
  background-color: #FFF6F6;
  margin-bottom: 30rpx;
  position: relative;
  padding: 90rpx 24rpx 88rpx;
  box-sizing: border-box;
}
  .recommend-main-hotIcon{
    position: absolute;
    top: 0;
    right: 0;
  }
  .recommend-main-hotIcon>img{
    width: 137rpx;
    height: 47rpx;
    margin-top: -8rpx;
  }
  .recommend-main-hotIcon>p{
    font-size: 24rpx;
    color: #FFFFFF;
    position: absolute;
    top: 2rpx;
    right: 16rpx;
  }
  .recommend-main-content{
    font-size: 32rpx;
    color: #323232;
    font-weight: 500;
  }
.recommend-main-content+p{
  text-align: right;
  margin-top: 42rpx;
  color: #323232;
  font-size: 24rpx;
  font-weight: 500;
}
  .discussBtn{
    width: 246rpx;
    height: 64rpx;
    background-color: #EF5A56;
    border-radius: 32rpx;
    line-height: 64rpx;
    text-align: center;
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -123rpx;
    margin-bottom: -10rpx;
  }
</style>
